<template>
  <div class="wrapper">
    <!-- 首页轮播图 -->
    <div v-if="homeBannerShow" class="home-banner">
      <swiper :options="bannerOption">
        <swiper-slide v-for="(item, index) in homeBanner" :key="index">
          <a :href="item.url"><img :src="item.title_thumb" /></a>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
    <div v-else class="home-banner-skeleton">
      <img src="../../assets/images/spinner.gif">
    </div>
    <!-- 首页分类 -->
    <div class="sort">
      <div class="sort-list">
        <template v-for="(item, index) in goodsCategory" v-if="index < 5">
          <router-link tag="div" class="sort-item" :key="index" :to="'/main-category/' + item.id">
            <img :src="item.url">
            <span>{{item.name}}</span>
          </router-link>
        </template>
      </div>
      <div class="sort-list">
        <template v-for="(item, index) in goodsCategory" v-if="index > 4">
          <router-link tag="div" class="sort-item" :key="index" :to="'/main-category/' + item.id">
            <img :src="item.url">
            <span>{{item.name}}</span>
          </router-link>
        </template>
      </div>
    </div>
    <!-- 快捷入口 -->
    <div class="link">
      <template v-for="(item, index) in quickLink">
        <router-link tag="div" class="link-item" :key="index" :to="item.link">
          <img :src="item.icon">
          <h4>{{item.name}}</h4>
          <p>{{item.brief}}</p>
        </router-link>
      </template>
    </div>
    <!-- 活动滑块 -->
    <div class="activity-banner">
      <swiper :options="activityOption">
        <swiper-slide class="slider-item" v-for="(item, index) in slideBanner" :key="index">
          <img :src="item.url" />
        </swiper-slide>
      </swiper>
    </div>
    <!-- 热门商品 -->
    <div class="hot-title"><span><i class="iconfont">&#xe607;</i>热门商品</span></div>
    <div v-if="hotGoodsShow" class="hot-goods">
      <vue-data-loading :loading="loading" :completed="completed" :listens="['infinite-scroll', 'pull-down']" :init-scroll="true" @infinite-scroll="infiniteScroll" @pull-down="pullDown">
        <goods-list :goodsList="hotGoodsList"></goods-list>
        <div slot="completed" class="completed-notice">没有更多内容了,您这次发现了{{hotGoodsList.length}}件商品</div>
      </vue-data-loading>
    </div>
    <div v-else class="hot-goods-skeleton">
      <img src="../../assets/images/spinner.gif">商品列表加载中...
    </div>
    <!-- 导航 -->
    <tabbar :current="1"></tabbar>
  </div>
</template>
<script>
import spinner from '@/components/loading/spinner'
import {swiper, swiperSlide} from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import {goodsCategory, quickLink} from '@static/home/config.js'
import VueDataLoading from 'vue-data-loading'
import goodsList from '@/components/goods/goods-list.vue'
import tabbar from '@/components/tabbar'
import {toast} from '@/libs/toast'
export default {
  created () {
    this.goodsCategory = goodsCategory
    this.quickLink = quickLink
  },
  mounted () {
    this.getHomeBanner()
    this.getHotGoodsList()
  },
  data () {
    return {
      homeBanner: [],
      homeBannerShow: false,
      bannerOption: {
        lazy: true,
        pagination: {
          el: '.swiper-pagination',
          dynamicBullets: true
        },
        autoplay: {
          delay: 2500,
          disableOnInteraction: false
        }
      },
      goodsCategory: [],
      quickLink: [],
      activityOption: {
        initialSlide: 1,
        slidesPerView: 1.2,
        spaceBetween: 10,
        centeredSlides: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      },
      slideBanner: [{
        url: './static/home/img/sliderBanner/01.jpg'
      }, {
        url: './static/home/img/sliderBanner/02.jpg'
      }, {
        url: './static/home/img/sliderBanner/03.jpg'
      }],
      hotGoodsList: [],
      hotGoodsShow: false,
      loading: false,
      completed: false,
      page: 1
    }
  },
  components: {
    'spinner': spinner,
    swiper,
    swiperSlide,
    VueDataLoading,
    'goods-list': goodsList,
    'tabbar': tabbar
  },
  methods: {
    getHomeBanner () {
      this.$reqGet('Article/articleGetList')
        .then(json => {
          if (json.error === '00') {
            this.homeBanner = json.data.list
            this.homeBannerShow = true
          } else {
            toast(json.message)
          }
        })
    },
    getHotGoodsList () {
      this.loading = true
      this.$reqGet('Goods/goodsGetHot?pages=' + this.page)
        .then(json => {
          if (json.error === '00') {
            if (json.goods.goods.length) {
              this.hotGoodsList = this.hotGoodsList.concat(json.goods.goods)
              this.hotGoodsShow = true
            } else {
              this.completed = true
            }
            this.loading = false
          } else {
            toast(json.message)
          }
        })
    },
    pullUp () {
      this.page++
      this.getHotGoodsList()
    },
    pullDown () {
      this.hotGoodsList = []
      this.page = 1
      this.completed = false
      this.getHotGoodsList()
    },
    infiniteScroll () {
      this.page++
      this.getHotGoodsList()
    }
  }
}
</script>
<style lang="less" scoped>
.home-banner{
  width: 750*@rex;
  height: 293*@rex;
  a, img{
    width: 750*@rex;
    height: 293*@rex;
    display: block;
  }
}
.home-banner-skeleton{
  width: 750*@rex;
  height: 293*@rex;
  background: @skeleton;
  display: flex;
  justify-content: center;
  align-items: center;
  img{
    width: 50*@rex;
    height: 50*@rex;
    display: block;
  }
}
.sort{
  width: 710*@rex;
  background: @white;
  border-radius: 20*@rex;
  margin: 20*@rex;
}
.sort-list{
  display: flex;
}
.sort-item+.sort-item{
  border-left: 1*@rex solid @bg;
}
.sort-item{
  flex: 1;
  padding: 20*@rex 0;
  border-bottom: 1*@rex solid @bg;
  img{
    width: 80*@rex;
    height: 80*@rex;
    display: block;
    margin: 0 auto;
  }
  span{
    font-size: @font-small;
    color: @text-black;
    display: block;
    text-align: center;
    margin-top: 12*@rex;
  }
}
.link{
  width: 710*@rex;
  background: @white;
  border-radius: 20*@rex;
  margin: 20*@rex;
  display: flex;
}
.link-item+.link-item{
  border-left: 20*@rex solid @bg;
}
.link-item{
  flex: 1;
  padding: 20*@rex 0;
  img{
    width: 80*@rex;
    height: 80*@rex;
    display: block;
    margin: 0 auto;
  }
  h4{
    font-size: @font-normal;
    font-weight: normal;
    margin: 14*@rex 0 6*@rex;
    text-align: center;
    color: @text-black;
  }
  p{
    font-size: @font-small;
    margin: 0;
    text-align: center;
    color: @text-gray;
  }
}
.activity-banner{
  width: 750*@rex;
  overflow: hidden;
  margin-bottom: 20*@rex;
  img{
    width: 100%;
    height: auto;
    display: block;
  }
}
.hot-title{
  width: 750*@rex;
  position: relative;
  padding: 20*@rex 0;
  .iconfont{
    margin-right: 6*@rex;
  }
  span{
    width: 200*@rex;
    text-align: center;
    display: block;
    margin: 0 auto;
    background: @bg;
    font-size: @font-normal;
    color: @text-gray;
    position: relative;
    z-index: 3;
  }
  &:before{
    content: '';
    width: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}
.hot-goods-skeleton{
  padding: 20*@rex 0;
  overflow: hidden;
  line-height: 1;
  font-size: 24*@rex;
  text-align: center;
  color: @text-gray;
  img{
    width: 24*@rex;
    height: 24*@rex;
    margin-right: 6*@rex;
    vertical-align: -4*@rex;
  }
}
</style>
